<template>
  <div>
    <orderheader :title="title">
      <template slot="tips">
        <span>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</span>
      </template>
    </orderheader>
    <div class="page-main">
      <div class="cart-list">
        <div class="container">
          <div class="list-head">
            <div class="col-check">
              <input
                type="checkbox"
                @change="changeSelAll(checkAll)"
                :checked="checkAll"
              />全选
            </div>
            <div class="col-img"></div>
            <div class="col-name">商品名称</div>
            <div class="col-price">单价</div>
            <div class="col-num">数量</div>
            <div class="col-total">小计</div>
            <div class="col-action">操作</div>
          </div>
          <div class="list-body">
            <div
              class="list-item"
              v-for="(item, index) in cartList"
              :key="index"
            >
              <div class="col-check">
                <input
                  type="checkbox"
                  :checked="item.proselected"
                  @change="changeProSel(item)"
                />
              </div>
              <div class="col-img">
                <img :src="item.proimg" width="80" height="80" />
              </div>
              <div class="col-name">
                <a :href="'/product/' + item.pid" target="_blank">{{
                  item.proname
                }}</a>
              </div>
              <div class="col-price">{{ item.proprice }}元</div>
              <div class="col-num">
                <el-input-number
                  v-model="item.num"
                  @change="upProBuyNum(item.cid)"
                  :min="1"
                  :max="10"
                  label="描述文字"
                ></el-input-number>
              </div>
              <div class="col-total">{{ item.proprice * item.num }}元</div>
              <div class="col-action">
                <a href="javascript:;" @click="delCart(item.cid)">删除</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="cart-bar">
        <div class="container">
          <div class="section-left">
            <a href="">继续购物</a>
            <span class="cart-total"
              >共 <i>{{ pronumcount }}</i> 件商品，已选择
              <i>{{ selprocount }}</i
              >件</span
            >
          </div>
          <span class="total-price"
            >合计：<em>{{ cartTotalPrice }}</em
            >元<a
              :href="cartTotalPrice == 0 ? 'javascript:;' : '/checkout'"
              :class="[cartTotalPrice == 0 ? btndisable : btnenable]"
              >去结算</a
            ></span
          >
        </div>
      </div>
    </div>
    <navfooter></navfooter>
  </div>
</template>

<script>
import orderheader from "./../components/orderheader";
import navfooter from "./../components/navfooter";
import qs from "qs";
export default {
  name: "cart",
  components: {
    orderheader,
    navfooter,
  },
  computed: {
    checkAll() {
      return this.cartList.filter((item) => item.proselected == 0).length > 0
        ? false
        : true;
    },
    cartTotalPrice() {
      let money = 0;
      this.cartList.forEach((item) => {
        if (item.proselected) {
          money += item.num * item.proprice;
        }
      });
      return money;
    },
    pronumcount() {
      return this.cartList.length;
    },
    selprocount() {
      return this.cartList.filter((item) => item.proselected == 1).length;
    },
  },
  data() {
    return {
      num: 0,
      title: "我的购物车",
      cartList: [],
      allChecked: false, //是否全选
      btndisable: "btn-disable",
      btnenable: "btn-enable",
    };
  },
  mounted() {
    this.getCartList();
  },
  methods: {
    delCart(cid) {
      var params = {
        cid: cid,
      };
      this.axios.post("/delCart", qs.stringify(params)).then((res) => {
        this.getCartList();
      });
    },
    changeSelAll(selAll) {
      var params = {
        proselected: !selAll,
      };
      this.axios.post("/upSelAll", qs.stringify(params)).then((res) => {
        this.getCartList();
      });
    },
    upProBuyNum(cid) {
      var params = {
        cid: cid,
        num: this.cartList.filter((item) => item.cid == cid)[0].num,
      };
      this.axios.post("/upProNum", qs.stringify(params)).then((res) => {
        this.getCartList();
      });
    },
    changeProSel(item) {
      var params = {
        cid: item.cid,
        proselected: !item.proselected,
      };
      this.axios.post("/upProSel", qs.stringify(params)).then((res) => {
        this.getCartList();
      });
    },
    getCartList() {
      this.axios.defaults.withCredentials = true;
      this.axios.get("/getCartList").then((res) => {
        this.cartList = res || [];
        console.log(this.cartList)
      });
    },
  },
};
</script>

<style lang='scss'>
.page-main {
  background: #f5f5f5;
  padding: 38px 0px;
  .cart-bar {
    height: 50px;
    line-height: 50px;
    margin-top: 20px;
    .container {
      display: flex;
      justify-content: space-between;
      background-color: #fff;
      .section-left {
        a {
          margin-left: 32px;
        }
        .cart-total {
          margin-left: 16px;
          padding-left: 16px;
          border-left: 1px solid #eee;
          color: #757575;
          i {
            color: #ff6700;
          }
        }
      }
      .total-price {
        padding-left: 13px;
        color: #ff6700;
        em {
          font-size: 30px;
        }
        .btn-disable {
          width: 200px;
          height: 48px;
          line-height: 48px;
          font-size: 18px;
          margin-left: 50px;
          background: #e0e0e0;
          display: inline-block;
          color: #fff;
          text-align: center;
        }
        .btn-enable {
          width: 200px;
          height: 48px;
          line-height: 48px;
          font-size: 18px;
          margin-left: 50px;
          background: #ff6700;
          display: inline-block;
          color: #fff;
          text-align: center;
        }
      }
    }
  }
  .cart-list {
    .container {
      background-color: #fff;
      .el-checkbox__input.is-checked .el-checkbox__inner,
      .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: #ff6600;
        border-color: #ff6600;
      }
      .col-check {
        width: 110px;
        padding-left: 10px;
      }
      .list-body {
        .list-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-top: 1px solid #e0e0e0;
          padding: 10px 0px;
        }
      }
      .col-img {
        width: 120px;
      }
      .col-name {
        width: 380px;
      }
      .col-price {
        width: 140px;
        text-align: center;
      }
      .col-num {
        width: 150px;
        text-align: center;
      }
      .col-total {
        width: 120px;
        text-align: right;
        padding-right: 81px;
      }
      .col-action {
        width: 80px;
        text-align: center;
      }
      .list-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 70px;
      }
    }
  }
}
</style>